<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./reset.css" />
    <title>BFC</title>
    <style>
      /* 高度塌陷 */
      /* 
      在浮动布局中，父元素的高度默认是被子元素撑开的
      当子元素浮动以后，其会脱离文档流，导致无法撑开父元素的高度
      父元素的高度就会塌陷
      解决方式： 1.父元素高度写死
                2.开启父元素的BFC
       */
      /* BFC */
      /* BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
        具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，
        并且 BFC 具有普通容器所没有的一些特性 */

      /* 开启bfc */
      /*
        1.body节点
        2.positon（绝对定位） absolute（相对于static以外的第一个父级元素） fixed（body）
        3.overflow （除了visible）
        4.display (flex inline-block)
         */
    </style>
  </head>
  <body>
    <div class="header">
      <ul class="nav">
        <li>HTML/CSS</li>
        <li>Brower Sider</li>
        <li>Server Sider</li>
        <li>Programming</li>
        <li>XML</li>
      </ul>
    </div>
  </body>
</html>
